<template>
<div>
  <transition name="el-zoom-in-top">
    <div>
      <el-card class="box-card" >
        <template #header>
          <div class="card-header">
            <span style="color: #00a4ff;cursor: default">团队信息</span>
            <span style="font-size: 20px; font-weight: bold">{{subject}}</span>
            <i class="fa fa-group fa-lg"/>
          </div>
        </template>
        <div class="card-body">
          <div class="pics" >
            <el-image :src="pics" fit="cover" style="width: 400px;height: 350px;" v-show="team"/>
            <el-empty description="暂无数据" v-show="!team" style="margin-left: 100px"></el-empty>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="content" v-show="team!==''">
            <el-collapse v-model="activeSide"  accordion >
              <el-collapse-item title="团队介绍" name="1">
                <span>
                  来自{{subject}}的医疗队伍，是一个作风优良，团结互助的队伍，里面聚集了一群品德高尚，医术高超，志趣相投的医护人员</span>
              </el-collapse-item>
              <el-collapse-item title="团队成员" name="2">
                 <el-link v-for="item in team" :underline="false" href="#" class="hvr-grow" @click="go2DoctorInfo(item.id)"><!--此处跳转到医生信息页-->
                   {{item.name}} ,
                  </el-link>
              </el-collapse-item>
              <el-collapse-item title="团队荣誉" name="3">
                <span v-for="item in achives" style="white-space: pre-wrap">
                  {{item+'\n'}}
                </span>
              </el-collapse-item>
              <el-collapse-item title="团队寄语" name="4">
                <span>{{description}}</span>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </el-card>
    </div>
  </transition>

</div>
</template>

<script>
export default {
  name: "TeamCard",
  props:['team','description','subject','pics'],
  mounted() {

  },
  data(){
    return{
      selectDoctor: 0,
      activeSide: '',
      achives:[
          '院优秀队伍',
          '市优秀医疗团队',
          '市荣誉白衣天使',
          '省优秀卫生标兵'
      ],
      msg: '防疫卫生，人人有责',
      drawerShow:false,
    }
  },
  methods:{

    go2DoctorInfo(id){
      this.$router.push({
        path: '/doctor',
        query:{
          drId: id
        }
      })
    },

  }
}
</script>

<style scoped>
::v-deep(#text){
  font-size: 18px;
}
.content{
  width: 600px;
  height: auto;
}
.el-divider{
  height: 350px;
}
.card-body{
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
.pics{
  width: fit-content;
  height: fit-content;
}
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box-card{
  width: 1100px;
  height: 470px;
  position: relative;
  top: 50px;
  right: 20px;
}
</style>